import React, { Component } from 'react'

export default class App extends Component {

    state = {
        flag: true
    }



    render() {

        let com = null

        if (this.state.flag) {
            com = <h1>为真</h1>
        } else {
            com = <h1>为假</h1>
        }

        return (
            <div>
                <h1>App</h1>

                {/* 通过三目运算的方式来实现显示隐藏 */}
                {this.state.flag ? (<>为真</>) : (<>为假</>)}

                {/* 前面的条件 为真 显示 后面内容 */}
                {this.state.flag && (<h1>为真的时候显示</h1>)}

                {/* 前面条件 为假 显示 后面内容 */}
                {this.state.flag || (<h1>为假的时候显示</h1>)}

                <button onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>切换显示</button>

                {com}
            </div>
        )
    }
}
